<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="viewport-fit=cover,width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>web-screenshot</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">

    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        body {
            font-family: 苹方, 黑体;
            font-size: 14px;
            color: #3b3b3b;
        }

        .logo {
            position: fixed;
            right: 12px;
            top: 12px;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            cursor: pointer;
            box-shadow: 1px 3px 12px #ccc;
            transition: 0.3s;
        }

        .logo:hover {
            box-shadow: 1px 3px 12px #999;
            transition: 0.3s;
        }

        .logo a,
        .logo img {
            display: inline-block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

        .title {
            text-align: center;
            padding: 0px 12px;
            padding-top: 80px;
            box-sizing: border-box;
        }

        .description {
            text-align: center;
            color: #5a5959;
            padding: 24px 12px;
            box-sizing: border-box;
        }

        .table {
            text-align: center;
            display: inline-block;
            padding: 12px;
            box-sizing: border-box;
        }

        .table td {
            border-bottom: 1px solid #ccc;
            padding: 6px 12px;
            box-sizing: border-box;
        }

        .img {
            box-shadow: 0px 0px 5px #ccc;
            max-width: 90%;
            display: block;
            margin: 0px auto;
        }

        a {
            color: #0363f3;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="logo" title="打开小明IO主页">
        <a href="https://xiaomingio.top/me">
            <img src="https://xiaomingio.top/me/head.jpg" />
        </a>
    </div>

    <h1 class="title">web-screenshot</h1>
    <div class="description">一个浏览器扩展，可以选择页面中某个 DOM 元素进行截图，也可以框选某个区域进行截图</div>


    <center>
        <img class="img" src="./7.gif" />
    </center>

    <h1 class="title">浏览器支持度</h1>
    <div class="description">
        支持所有常见的基于 Chromium 的现代浏览器： Chrome、Edge、360急速浏览器、搜狗、QQ浏览器...
    </div>


    <h1 class="title">安装</h1>
    <div class="description">
        <div style="text-align: left; max-width: 800px;margin: 0 auto;">
            <b><a
                    href="https://chromewebstore.google.com/detail/web-screenshot/pmjofmnlelohbkcclejgenpfgpfchbjo?hl=zh-CN&authuser=0">点击打开软件主页
                    - Chrome 应用商店</a></b>
            <br />
            <br />
            <b>推荐使用 Chrome 应用商店安装，如果你无法使用 Chrome 商店，则使用下面手动安装。</b>
            <br />
            <br />
            <div>1. <a href="./web-screenshot.crx">点击下载程序安装包</a></div>
            <div>2. 打开扩展程序管理页面</div>
            <div style="padding: 12px 0px;text-align: center;">
                <img class="img" src="./9.jpg" />
            </div>
            <div>3. 将下载的程序直接拖拽到扩展程序管理页面中（浏览器会自动安装）</div>
            <div>4. 将插件固定到顶部，方便不使用快捷键时点击图标进行截图</div>
            <div style="padding: 12px 0px;text-align: center;">
                <img class="img" src="./8.jpg" />
            </div>
            <div>5. 重启浏览器</div>
        </div>
    </div>

    <h1 class="title">使用方法</h1>
    <div class="description">
        <b>点击扩展图标后可以选择截图方式或者对软件进行配置</b>
        <br />
        <br />
        <b>也可以直接使用快捷键</b>
        <div>1. Alt+Shift+D 选择DOM截图</div>
        <div>2. Alt+Shift+Q 任意区域截图</div>
    </div>


    <h1 class="title">软件仓库</h1>
    <div class="description">
        <a href="https://github.com/wangzongming/web-screenshot">Github:
            https://github.com/wangzongming/web-screenshot</a>
        <br>
        <br>
        <a
            href="https://chromewebstore.google.com/detail/web-screenshot/pmjofmnlelohbkcclejgenpfgpfchbjo?hl=zh-CN&authuser=0">
            Chrome 商店:
            https://chromewebstore.google.com/detail/web-screenshot/pmjofmnlelohbkcclejgenpfgpfchbjo?hl=zh-CN&authuser=0</a>
    </div>

    <h1 class="title">交流群</h1>
    <div class="description"> 
        QQ 交流群: 854445223
    </div>

    <h1 class="title">相关文章</h1>
    <div class="description">
        掘金：<a href="https://juejin.cn/spost/7369270223868674111">https://juejin.cn/spost/7369270223868674111</a>
    </div>

    <div class="description">微信中可能无法正确跳转上面的那些地址，请复制链接到浏览器中打开。</div>

</body>

</html>